<template>
  <view class="appointment-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <uni-icons 
        class="back-icon" 
        type="left" 
        size="36rpx" 
        color="#00CC71"
        @click="goBack"
      ></uni-icons>
      <text class="title">预约挂号</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-container">
      <uni-icons 
        class="search-icon" 
        type="search" 
        size="32rpx" 
        color="#00CC71"
      ></uni-icons>
      <input 
        class="search-input" 
        placeholder="输入医院名称" 
        placeholder-style="color:#CFCFCF"
		:showAction="false" v-model="inputValue"
		@input="searchHospital"
      />
    </view>

    <!-- 医院列表（纵向滚动） -->
    <view class="hospital-list">
      <view 
        class="hospital-item" 
       v-for="item in hospitalList" :key="item" @click="goDepartment(item)"
      >
        <image 
          class="hospital-logo" 
          :src="item.logo" 
          mode="aspectFill"
        ></image>
        <view class="hospital-info">
          <text class="hospital-name">{{ item.title }}</text>
          <view style="display: flex;align-items: center;justify-content: flex-start;">
          						<view class="listGrade">
          							{{item.grade}}
          						</view>
          						<view class="listCategory">
          							{{item.category}}
          						</view>
          					</view>
          <text class="address">地址：{{ item.address }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

import { onLoad } from "@dcloudio/uni-app"
	import { ref } from "vue"
	interface hospital {
		hid : number
		title : string
		logo : string
		grade : string
		category : string
		address : string
	}
	interface data {
		page : number
		pagenum : number
		result : hospital[]
		total : number
	}

	interface data1 {
		code : number
		data : data
		msg : string
	}
	const hospitalList = ref()

	//返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
	//挑战
	const goDepartment = (item) => {
		uni.setStorageSync('depar',item)
	  uni.navigateTo({
	    url: `/pages/Department/Department?data=${encodeURIComponent(JSON.stringify(item))}`
	  })
	}

	//模糊搜素哦
	const inputValue = ref("")
	const searchHospital = () => {
		uni.request({
			url: "http://localhost:3010/hospital/name",
			method: "GET",
			header: {
				'Content-Type': 'application/x-www-form-urlencoded',
				'Authorization': 'Bearer ' + uni.getStorageSync('token'), // 从本地缓存获取 Token
			},
			data: {
				name: inputValue.value
			},
			success(b) {
				const response = b.data as data1
				hospitalList.value = response.data.result
			},
			fail(err) {
				console.log("失败", err)
			}
		})
	}
	//加载
	onLoad(() => {
		uni.request({
			url: "http://localhost:3010/hospital/limit",
			method: "POST",
			header: {
				'Content-Type': 'application/x-www-form-urlencoded',
				'Authorization': 'Bearer ' + uni.getStorageSync('token'), // 从本地缓存获取 Token
			},
			data: {
				page: 1,
				pagenum: 10
			},
			success(b) {
				const response = b.data as data1
				hospitalList.value = response.data.result

			},
			fail(err) {
				console.log("失败", err)
			}
		})
	})
</script>

<style scoped lang="scss">
.appointment-page {
  background-color: #e1e1e1;
  min-height: 100vh;

  // 导航栏
  .navbar {
    display: flex;
    align-items: center;
    height: 88rpx;
    background: #FFFFFF;
    padding: 0 24rpx;
    border-bottom: 1px solid #ECECEC;
	margin-top: 90rpx;
    .back-icon {
      margin-right: 16rpx;
    }

    .title {
      font-size: 36rpx;
      color: #00CC71;
      font-weight: 700;
    }
  }

  // 搜索框
  .search-container {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 2rpx solid #00CC71;
    border-radius: 10rpx;
    margin: 20rpx;
    padding: 8rpx 16rpx;

    .search-icon {
      margin-right: 12rpx;
    }

    .search-input {
      flex: 1;
      height: 60rpx;
      font-size: 28rpx;
      color: #333;
    }
  }

  // 医院列表
  .hospital-list {
	  margin-top: 60rpx;
    padding: 0 20rpx;

    .hospital-item {
      display: flex;
      align-items: center;
      background: #FFFFFF;
      border-radius: 20rpx;
      padding: 24rpx;
      margin-bottom: 20rpx;

      .hospital-logo {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }

      .hospital-info {
        flex: 1;

        .hospital-name {
          font-size: 32rpx;
          font-weight: 700;
          margin-bottom: 8rpx;
          display: block;
        }

        .tag-group {
          display: flex;
          gap: 10rpx;
          margin-bottom: 8rpx;

          .tag {
            background: #005f90;
            color: #FFFFFF;
            font-size: 24rpx;
            padding: 6rpx 16rpx;
            border-radius: 16rpx;
          }
        }

        .address {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}
</style>